<template>
  <div class="history">
    <section>
        <span>历史记录</span>
        <span style="color:red" @click="$store.commit('delect')">全部删除</span>
    </section>
    <ul>
        <li v-for="(item,index) in $store.state.history" @click="$emit('check',item)">{{item}}&#x3000;<span @click.stop="$store.commit('del',index)">X</span></li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {},
};
</script>
<style lang="scss" scoped>
.history{
  section{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    font-size: 15px;
  }
  ul{
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    li{
        padding: 3px 10px;
        border-radius: 10px;
        border: 1px solid #ccc;
        margin: 0 10px 10px 0;
    }
  }
}
</style>